<script lang="ts" setup>
  import { ref } from "vue";
  const lights = ref([
    {
      type: "AmbientLight",
      color: "#fff",
      intensity: 1.8,
    },

    {
      type: "PointLight",
      color: "#fff",
      position: { x: 20, y: 100, z: 100 },
      intensity: 1,
    },
    {
      type: "PointLight",
      color: "#fff",
      position: { x: -20, y: 10, z: -100 },
      intensity: 1,
    },
  ]);
  const isMove = ref(false);
  const object = ref(null);
  const onMouseMove = (event: MouseEvent, intersected: any) => {
    console.log(event);
    isMove.value = true;
    if (object.value) {
      (object.value as any).material.color.setStyle("#fff");
    }
    if (intersected) {
      object.value = intersected.object;
      (object.value as any).material.color.setStyle("#13ce66");
    }
  };
  const onMouseLeave = () => {
    isMove.value = false;
  };
  const rotation = ref({
    x: 0,
    y: 0,
    z: 0,
  });
  const onLoad = () => {
    rotate();
  };
  function rotate() {
    requestAnimationFrame(rotate);
    if (isMove.value == false) {
      rotation.value.y -= 0.003;
    }
  }
</script>
<template>
  <div class="loader">
    <vue3dLoader
      :ref="object"
      :height="'700'"
      :showFps="false"
      :filePath="'/wood.glb'"
      :backgroundColor="'#f2ece2'"
      :lights="lights"
      :rotation="rotation"
      :onLoad="onLoad"
      :cameraPosition="{ x: 0, y: 5, z: 5 }"
      :enableDamping="true"
      :dampingFactor="0.05"
      @mouseleave="onMouseLeave"
      @mousemove="onMouseMove"
      :backgroundAlpha="0"
      :horizontalCtrl="true"
    ></vue3dLoader>
  </div>
</template>

<style lang="scss" scoped>
  .loader {
    position: absolute;
    width: 100%;
    height: 100%;
  }
</style>
